<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="商品名称/条码"
      />
      <el-select v-model="listQuery.warehouseId" clearable style="width: 200px" class="filter-item" placeholder="请选择仓库" >
        <el-option v-for="(item,index) in warehouseList" :key="index" :label="item.warehouseName" :value="item.id" />
      </el-select>
      <el-button
        v-permission="['promote:warehouse:query']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      style="white-space: pre-line"
    >
      <el-table-column prop="title" align="center" label="商品名称">
        <template slot-scope="scope">
          <el-col>{{ scope.row.spuName }} {{ scope.row.skuName }}</el-col>
        </template>
      </el-table-column>
      <el-table-column prop="barCode" align="center" label="条码"/>
      <el-table-column prop="unit" align="center" label="单位"/>
      <el-table-column prop="allStock" align="center" label="总库存数"/>
      <el-table-column prop="price" align="center" label="平均成本">
        <template slot-scope="scope">
          <el-col>{{ Math.round(scope.row.price) / 100 }}</el-col>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总成本" prop="allPrice">
        <template slot-scope="scope">
          <el-col>{{ (scope.row.allStock * scope.row.price / 100).toFixed(2) }}</el-col>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-permission="['warehouse:warehouse:update']"
            type="primary"
            size="small"
            @click="handleLog(scope.row)"
          >库存流水</el-button>
          <el-button
            v-permission="['warehouse:warehouse:active']"
            type="primary"
            size="small"
            @click=" handleGoodsWarehouseLog(scope.row)">库存分布</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <!-- 库存流水 -->
    <el-dialog :visible.sync="logDialogFormVisible" :width="logDiaLogWidth" :custom-class="logDialogClass" title="库存流水">
      <template>
        <!-- 查询结果 -->
        <el-table
          v-loading="listLogLoading"
          :data="logList"
          size="small"
          element-loading-text="正在查询中。。。"
          border
          fit
          highlight-current-row
          style="white-space: pre-line"
        >
          <el-table-column prop="orderNo" align="center" label="单据编号"/>
          <el-table-column align="center" label="商品名称">
            <template slot-scope="scope">
              <el-col>{{ scope.row.spuName + "" +scope.row.skuName }}</el-col>
            </template>
          </el-table-column>
          <el-table-column prop="spuId" align="center" label="商品编号"/>
          <el-table-column prop="skuNo" align="center" label="条形码"/>
          <el-table-column prop="changeSkuStock" align="center" label="变化数量"/>
          <el-table-column prop="warehouseSkuStock" align="center" label="剩余库存"/>
          <el-table-column prop="gmtCreate" align="center" label="变化时间">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.gmtCreate | formatTime }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="type" align="center" label="类型">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.type | typeFilter }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="warehouseName" align="center" label="仓库"/>
          <el-table-column prop="adminName" align="center" label="操作人"/>
        </el-table>

        <pagination
          v-show="logTotal>0"
          :total="logTotal"
          :page.sync="listLogQuery.pageNo"
          :limit.sync="listLogQuery.limit"
          @pagination="getLogList"
        />
      </template>
    </el-dialog>
  </div>
</template>

<style>
.el-table .cell {
  white-space: pre-line;
}
</style>

<script>
import { goodsList } from '@/api/goods'
import { list } from '@/api/warehouseoperlog'
import { listWareHousesByPara } from '@/api/warehouse'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
const typeMap = {
  1: '入库',
  2: '出库',
  3: '盘点',
  4: '损耗',
  5: '调拨',
  6: '减少库存',
  7: '恢复库存',
  8: '退货',
  9: '退库'
}
export default {
  name: 'GoodsList',
  components: { Pagination },
  filters: {
    typeFilter(status) {
      return typeMap[status]
    }
  },
  data() {
    return {
      statusMap: [{ value: 0, name: '禁用' }, { value: 1, name: '正常' }],
      list: [],
      logList: [],
      logTotal: 0,
      warehouseList: [],
      total: 0,
      listLogLoading: true,
      logDialogFormVisible: false,
      logDiaLogWidth: '72%',
      logDialogClass: 'logDialogClass',
      listLoading: true,
      listQuery: {
        pageNo: 1,
        limit: 20,
        title: undefined,
        warehouseId: undefined
      },
      listLogQuery: {
        pageNo: 1,
        limit: 20,
        skuId: undefined
      },
      options: []
    }
  },
  created() {
    this.listWareHousesByPara()
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      goodsList(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        id: undefined,
        status: undefined
      }
    },
    listWareHousesByPara() {
      this.listQuery.status = 1
      listWareHousesByPara(this.listQuery)
        .then(response => {
          this.warehouseList = response.data.data
        })
        .catch(() => {
          this.warehouseList = []
        })
    },
    handleLog(row) {
      this.listLogQuery.skuId = row.id ? row.id : undefined
      this.getLogList()
      this.logDialogFormVisible = true
    },
    getLogList() {
      this.listLogLoading = true
      list(this.listLogQuery)
        .then(response => {
          this.logList = response.data.data.items
          this.logTotal = response.data.data.total
          this.listLogLoading = false
        })
        .catch(() => {
          this.logList = []
          this.logTotal = 0
          this.listLogLoading = false
        })
    },
    handleGoodsWarehouseLog(row) {
      this.$router.push({ path: '/warehouse/goods_warehouse_list?skuId=' + row.id })
    }

  }
}
</script>

